<template>
    <div class="amap-page-container" v-if="loc">
      <div id="container"></div>
      <div class="map-pois-mes" v-if="isIndex === 2">
        <div class="title">
          <span @click="changeTitleS" :class="{'active':showPois}">风景</span>
          <span @click="changeTitleT" :class="{'active':showTran}">地铁</span>
        </div>
        <div class="poisTran-items"  >
            <div v-if="showPois" class="itemWrapper">
                  <div v-for="(item, index) in poisMes" :key="index" @click="chanageCenter(item.position)" class="item">
                    <span class="left">{{index+1}}.{{item.name}}</span>
                    <span class="right">{{item.distance}}</span>
                  </div>
            </div>
            <div v-if="showTran" class="itemWrapper">
                <div v-for="(item, index) in tarnMes" :key="index" @click="chanageCenter(item.position)" class="item">
                  <span class="left">{{index+1}}.{{item.name}}</span>
                  <span class="right">{{item.distance}}</span>
                </div>
              </div>
        </div>
      </div>
    </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import AMap from 'AMap'
export default {
  name: '',
  props: {
    loc: {
      type: Array,
      default: () => {
        return []
      }
    },
    isIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      hotelLocations: [],
      centerLong: 0,
      centerLat: 0,
      markerList: [],
      pois: [],
      poisMes: [],
      map: {},
      poisMakers: [],
      tranMakers: [],
      tarnMes: [],
      showPois: true,
      showTran: false
    }
  },
  methods: {
    changeTitleS () {
      this.showPois = true
      this.showTran = false
    },
    changeTitleT () {
      this.showTran = true
      this.showPois = false
    },
    getHotelsLocation () {
      console.log(this.hotelLocations[0].longitude, this.hotelLocations[0].latitude)
      this.centerLong = this.hotelLocations[0].longitude
      this.centerLat = this.hotelLocations[0].latitude
    },
    init (val) {
      if (val === undefined) return
      console.log(val)
      const map = new AMap.Map('container', {
        center: [val[0].longitude, val[0].latitude],
        resizeEnable: true,
        zoom: 15
      })
      console.log(map)
      this.map = map
      AMap.plugin('AMap.ToolBar', function () { // 异步加载插件
        var toolbar = new AMap.ToolBar()
        map.addControl(toolbar)
      })
      this.setMaker()
      map.add(this.markerList)
      this.setPoiMakers(val)
      // this.setTransportMakers(val)
    },
    setMaker () {
      this.markerList = []
      const len = this.hotelLocations.length
      for (let i = 0; i < len; i++) {
        var icon = new AMap.Icon({
          image: 'https://vdata.amap.com/icons/b18/1/2.png',
          size: new AMap.Size(24, 24)
        })
        var marker = new AMap.Marker({
          icon: icon,
          position: [this.hotelLocations[i].longitude, this.hotelLocations[i].latitude],
          zIndex: 101
        })
        console.log(this.hotelLocations[i])
        this.markerList.push(marker)
      }
    },
    setPoiMakers (val) {
      const self = this
      AMap.service(['AMap.PlaceSearch'], function () {
        // 构造地点查询类
        if (self.isIndex !== 2) return
        var placeSearch1 = new AMap.PlaceSearch({
          type: '风景', // 兴趣点类别
          pageSize: 10, // 单页显示结果条数
          pageIndex: 1, // 页码
          citylimit: true, // 是否强制限制在设置的城市内搜索
          // map: self.map, // 展现结果的地图实例
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        })
        if (self.isIndex !== 2) return
        var cpoint = [val[0].longitude, val[0].latitude] // 中心点坐标
        placeSearch1.searchNearBy('', cpoint, 1500, function (status, result) {
          console.log(result)
          var pois = result.poiList.pois
          for (var i = 0; i < pois.length; i++) {
            var poi = pois[i]
            self.poisMakers[i] = new AMap.Marker({
              position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              title: poi.name,
              content: `<i class="iconfont icon-svglocationred"><span>${i + 1}</span></i>`
            })
            self.poisMes.push({
              name: poi.name,
              distance: poi.distance + '米',
              position: poi.location
            })
            self.map.add(self.poisMakers[i])
          }
        })
        var placeSearch2 = new AMap.PlaceSearch({
          type: '地铁', // 兴趣点类别
          pageSize: 10, // 单页显示结果条数
          pageIndex: 1, // 页码
          citylimit: true, // 是否强制限制在设置的城市内搜索
          map: self.map, // 展现结果的地图实例
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        })
        placeSearch2.searchNearBy('', cpoint, 1500, function (status, result) {
          console.log(result)
          var pois = result.poiList.pois
          for (var i = 0; i < pois.length; i++) {
            var poi = pois[i]
            self.tranMakers[i] = new AMap.Marker({
              position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              title: poi.name,
              content: `<i><span>${i + 1}</span></i>`
            })
            self.tarnMes.push({
              name: poi.name,
              distance: poi.distance + '米',
              position: poi.location
            })
            self.map.add(self.tranMakers[i])
          }
        })
      })
    },

    chanageCenter (p) {
      console.log(p)
      var position = new AMap.LngLat(p.lng, p.lat)
      // eslint-disable-next-line no-undef
      this.map.setCenter(position)
    }
  },
  mounted () {
    this.init()
  },
  watch: {
    loc: function (val) {
      console.log(val)
      this.hotelLocations = val
      this.init(val)
    }
  }
}
</script>

<style lang="less" scoped>
.amap-page-container{
  display: flex;
  width: 100%;
  height: 100%;
  #container {
    width:100%; height: 360px;
    /deep/.iconfont{
      color: rgb(29, 252, 0);
      position: relative;
      font-size: 35px;
      span{
        width: 15px;
        position: absolute;
        font-size: 16px;
        color: rgb(122, 150, 241);
        left: 50%;
        letter-spacing: -2px;
        margin-left: -9px;
        top: 4px;
        text-align: center;
      }
    }
  }
  .map-pois-mes{
    margin-left: 20px;
    width: 350px;
    .title{
      font-size: 15px;
      line-height: 40px;
      width: 100%;
      height: 40px;
      border-bottom: 1px solid #eee;
      span{
        display: inline-block;
        width: 40px;
        min-height:40px ;
        text-align: center;
        padding: 0 5px;
        &:hover{
          color: lightblue;
        }
      }
      .active{
        color: lightblue;
        border-bottom: solid 1px color lightblue;
      }
    }
    .poisTran-items{
      margin-top: 10px;
      overflow-y: scroll;
      height: 320px;
      .itemWrapper{
        font-size: 15px;
        cursor: pointer;
        .item{
          min-height: 40px;
          position: relative;
          .left{
            position: absolute;
            left: 5px;
            width: 120px;
          }
          .right{
            position: absolute;
            right: 5px;
          }
          &:hover{
            background-color:cadetblue;
          }
        }
      }
    }
  }
}

</style>
